<template>
  <view class="card_body">
    <view class="image">
      <image
        :src="props.data.mealImage"
        style="width: 100%; height: 100%; display: block; border-radius: 10rpx"
    /></view>
    <view class="foods_info">
      <view class="food_name">{{ data.mealName }}</view>
      <view class="food_tip"
        ><view><up-icon name="attach" color="#ff3232" :size="16" /></view>
        <view class="tip_remark">{{ data.mealRemark || '' }}</view></view
      >
      <view class="food_price">
        <view
          ><up-icon
            name="rmb"
            color="#ff3232"
            size="16"
            :label="data.mealPrice"
            :space="'0px'"
            labelColor="#ff3232"
          />
        </view>
        <counter :id="'id_' + data.id" :number="data.number ?? 0" @change-click="change"></counter>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import counter from '@/components/counter/counter.vue';
  import type { MealType } from '@/types/meal';
  const emit = defineEmits(['change']);

  const props = defineProps<{
    data: MealType;
  }>();

  function change(e: number) {
    let obj = props.data;
    obj.number = e;
    emit('change', obj);
  }
</script>

<style lang="scss">
  @import './styles/card.scss';
</style>
